<!doctype html>
<html>

<head>
   <meta charset="UTF-8">
   <title>根据页面滚动位置显示浮动框</title>
   <style>
      body {
         height: 2000px;
      }

      #toTop {
         position: fixed;
         bottom: 100px;
         right: 0;
         display: none;
      }
   </style>

</head>

<body>
   <div id="toTop">
      <a href="#">返回顶部</a>
   </div>

   <script>
      var toTop = document.getElementById("toTop");
      window.onscroll = function () {
         var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
         console.log(scrollTop);
         if (scrollTop > 500) {
            toTop.style.display = "block"
         } else {
            toTop.style.display = "none"
         }
      }
   </script>
</body>

</html>